import React from 'react'
import IntroductionBox from './introduction-box'
import 'video-react/dist/video-react.css'
import { BigPlayButton, ControlBar, ForwardControl, PlaybackRateMenuButton, Player, ReplayControl } from 'video-react'

export default class VideoDetailBox extends React.Component {

  render () {
    const {video} = this.props
    return <div>
      <div className='video-player' onClick={this.props.readyPlay}>
        <Player ref='player' poster={video.coverUrl} src={video.url}>
          <ControlBar>
            <PlaybackRateMenuButton
              rates={[5, 2, 1, 0.5, 0.1]}
              order={7.1}
              />
            <ReplayControl seconds={10} order={1.1} />
            <ForwardControl seconds={30} order={1.2} />
          </ControlBar>
          <BigPlayButton position='center' />
        </Player>
      </div>
      <IntroductionBox resources={video} type='video' />
    </div>
  }
}
